<template>
	<view>
		<view class="margin-sm bg-white padding-sm radius" style="display: flex;">
			<view style="margin-right: 20rpx;" @click="back">返回上级</view>
			<view style="font-size: 24rpx;color: #999;display: flex;" class="juzhong">
				<view v-for="item in routeList" style="margin-left: 10rpx;">/{{item.name}}</view>
			</view>

		</view>

		<view class="margin-sm  radius" style="display: flex;flex-wrap: wrap;background-color: #ccc">
			<view style="background-color: ; width: 200rpx;height: 200rpx" class=" margin-sm"
				v-for="item in folderList">
				<view style="flex-direction: column;" class="juzhong" @click="doubleClickFolder(item)">

					<view class=" " v-if="!isImage(item.url)">

						<view v-if="getFileType(item.name).icon=='folder-open'">
							<image style="width: 80rpx;height: 70rpx;"
								src="https://api3.m.grasswave.cn/opsli-boot/resources/static/files/img/文件夹.png"></image>
						</view>
						<vab-icon v-else class="vab-icon" :icon="['fas',getFileType(item.name).icon]"
							:style="{color:'#1489ff',fontSize:'45px'}"></vab-icon>
					</view>

					<view v-else>
						<image style="width: 100rpx;height: 100rpx;" class="radius " :src="item.url">
						</image>
					</view>
					<view class="container">
						<view class="div-container">{{item.name}}
						</view>
					</view>

				</view>
			</view>
		</view>


		<uni-popup ref="open" class="bg-white" type="bottom">
			<view class="bg-white padding-sm">
				<uni-section type="circle" :title="openData.name">
					<view style="margin-bottom: 20rpx;">文件链接：{{openData.url}}</view>
					<view style="margin-bottom: 20rpx;">文件描述：{{openData.remarks}}</view>
					<image :src="'http://api3.m.grasswave.cn/opsli-boot/QR?t='+openData.url"
						style="width: 300rpx;height: 300rpx;"></image>
					<image :src="openData.url" style="width: 300rpx;"></image>
				</uni-section>
				<button class="login-btn cu-btn block  lg round margin-bottom-sm" @click="openUrl">打开链接</button>
				<button class="login-btn cu-btn block bg-blue lg round margin-bottom-sm" @click="copy">复制链接</button>
				<button class="login-btn cu-btn block bg-blue lg round" @click="close">关闭</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		createPublicFolder,
		doDelete as deleteFile,
		doInsert,
		getList as qeryFolderList,
		renameFolder
	} from "@/api/system/files/SysFilesManagementApi.js";
	import {
		isNull
	} from '@/utils/validate';
	export default {
		data() {
			return {
				openData: {},
				routeList: [],
				queryParams: { //查询参数
					pageSize: 10000,
					pageNo: 1,
					parentId_EQ: 0 //目标文件（夹）id，值为0则查询根目录文件（夹）
				},

				folderList: [],
				fileTypeList: [{
						icon: 'file',
					}, // 未知类型
					{
						icon: 'file-archive',

					}, // 压缩包
					{
						icon: 'file-audio',

					}, // 音频文件
					{
						icon: 'file-image',

					}, // 图片
					{
						icon: 'file-pdf',

					}, // pdf文件
					{
						icon: 'file-word',

					}, // word文件
					{
						icon: 'file-excel',

					}, // excel文件
					{
						icon: 'file-video',

					}, // 视频文件
					{
						icon: 'file-wps',

					}, // WPS演示文件

					{
						icon: 'folder-open',

					}, // WPS演示文件
				]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			getUrl(data) {
				if (this.isImage(data.url)) {
					return data.url
				}
				let url2 = " https://api3.m.grasswave.cn/opsli-boot/resources/static/files/img/未知文件.png"
				return url2
			},
			isImage(url) {
				if (url == null) {
					return false
				}
				// 定义常见的图片扩展名（小写）
				const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];

				// 获取文件扩展名并转换为小写
				const extension = url.substring(url.lastIndexOf('.')).toLowerCase();
				return imageExtensions.includes(extension);
			},
			getFileType(fileName) {
				const fileExtension = fileName.split('.').pop().toLowerCase();
				let asdf = this.fileTypeList[0]


				if (fileName.split('.').length <= 1) {
					asdf = this.fileTypeList[9]
				}

				// for (let fileType of this.fileTypeList) {


				if (['zip', 'rar', '7z'].includes(fileExtension)) {
					asdf = this.fileTypeList[1]; // 压缩包
				}

				if (['mp3', 'wav', 'ogg'].includes(fileExtension)) {
					asdf = this.fileTypeList[2]; // 音频文件
				}

				if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
					asdf = this.fileTypeList[3]; // 图片
				}

				if (fileExtension === 'pdf') {
					asdf = this.fileTypeList[4]; // pdf文件
				}

				if (['doc', 'docx', 'wps', 'word'].includes(fileExtension)) {
					asdf = this.fileTypeList[5]; // word文件
				}


				if (['xls', 'xlsx', 'et', 'execl'].includes(fileExtension)) {

					asdf = this.fileTypeList[6]; // excel文件
				}

				if (['mp4', 'avi', 'mov'].includes(fileExtension)) {
					asdf = this.fileTypeList[7]; // 视频文件
				}


				// }


				return asdf; // 默认返回未知类型
			},
			openUrl() {
				window.open(this.openData.url, '_blank')
			},
			init() {
				this.getList()
			},
			copy() {
				uni.setClipboardData({
					data: this.openData.url,
					showToast: true
				})
			},
			doubleClickFolder(data) {

				//判断是否是文件夹
				console.log(data.url);
				if (data.url == null) {
					this.routeList.push({
						id: data.id,
						name: data.name
					})
					this.queryParams.parentId_EQ = data.id
					this.getList()
				} else {
					this.openData = data
					this.$refs.open.open()
				}


			},
			close() {
				this.$refs.open.close()
			},
			back() {
				if (this.routeList.length > 0) {
					this.routeList.pop()
					if (this.routeList.length > 0) {
						this.queryParams.parentId_EQ = this.routeList[this.routeList.length - 1].id
					} else {
						this.queryParams.parentId_EQ = 0
					}
				} else {
					this.queryParams.parentId_EQ = 0
				}


				this.getList()
			},
			async getList() {
				const {
					data
				} = await qeryFolderList(this.queryParams);

				this.folderList = data.rows

			}
		}
	}
</script>

<style lang="scss">
	.div-container {
		width: 200rpx;
		/* 根据需要调整宽度 */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 24rpx;
		/* 限制显示的行数 */
	}

	.vabiconborder {
		width: 80rpx;
		height: 80rpx;
		padding: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-color-primary;
	}
</style>